<template>
  <el-table :row-style="{height: '30px'}" :data="OrderList"
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{textAlign: 'center',background:'#eeebee'}" border
            style="width: 100%" size="small" max-height="400">
    <el-table-column fixed prop="id" label="订单ID" min-width="50" show-overflow-tooltip="true"/>
    <el-table-column prop="userId" label="用户ID" min-width="50" show-overflow-tooltip="true"/>
    <el-table-column prop="productId" label="商品ID" min-width="50" show-overflow-tooltip="true"/>
    <el-table-column prop="merchantId" label="商家ID" min-width="50" show-overflow-tooltip="true"/>
    <el-table-column prop="quantity" label="商品数量" min-width="50" show-overflow-tooltip="true"></el-table-column>
    <el-table-column prop="totalPrice" label="总价格" min-width="50" show-overflow-tooltip="true"></el-table-column>
    <el-table-column prop="paymentMethod" label="支付方式" min-width="50" show-overflow-tooltip="true">
      <template #default="scope">
        <div v-if="scope.row.paymentMethod == 1 " style="display: flex; align-items: center">
          <span style="margin-left: 10px">现金</span>
        </div>
        <div v-if="scope.row.paymentMethod == 2 " style="display: flex; align-items: center">
          <span style="margin-left: 10px">余额</span>
        </div>
        <div v-if="scope.row.paymentMethod == 3 " style="display: flex; align-items: center">
          <span style="margin-left: 10px">网银</span>
        </div>
        <div v-if="scope.row.paymentMethod == 4 " style="display: flex; align-items: center">
          <span style="margin-left: 10px">支付宝</span>
        </div>
        <div v-if="scope.row.paymentMethod == 5 " style="display: flex; align-items: center">
          <span style="margin-left: 10px">微信</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="shippingUser" label="收货人" min-width="50" show-overflow-tooltip="true"></el-table-column>
    <el-table-column prop="phone" label="电话" min-width="80" show-overflow-tooltip="true"></el-table-column>
    <el-table-column prop="address" label="地址" min-width="80" show-overflow-tooltip="true"></el-table-column>
    <el-table-column prop="createTime" label="注册时间" min-width="80" show-overflow-tooltip="true"/>
    <el-table-column prop="updateTime" label="更新时间" min-width="80" show-overflow-tooltip="true"/>
    <el-table-column fixed="right" prop="orderStatus" label="状态" min-width="50" show-overflow-tooltip="true">
      <template #default="scope">
        <div v-if="scope.row.orderStatus == 1 " style="display: flex; align-items: center">
          <el-icon color="#f50263"><IceCreamSquare /></el-icon>
          <span style="margin-left: 10px">已支付</span>
        </div>
        <div v-if="scope.row.orderStatus == 2 " style="display: flex; align-items: center">
          <el-icon color="#0726f3"><Position /></el-icon>
          <span style="margin-left: 10px">已发货</span>
        </div>
        <div v-if="scope.row.orderStatus == 3 " style="display: flex; align-items: center">
          <el-icon color="#0df346"><Select /></el-icon>
          <span style="margin-left: 10px">已收货</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="100">
      <template #default="scope">
        <el-button v-if="scope.row.orderStatus == 1"  link type="primary" class="btn-background-color-green" size="small"
                   @click.stop="">已付
        </el-button>
        <el-button v-if="scope.row.orderStatus == 2"  link type="primary" class="btn-background-color-blue" size="small"
                   @click.stop="getDialog(scope.row)">签收
        </el-button>
        <el-button v-if="scope.row.orderStatus == 3"  link type="primary" class="btn-background-color-green" size="small"
                   @click.stop="">完成
        </el-button>
        <el-button  link type="primary" class="btn-background-color-red" size="small"
                    @click.stop="removeDialog(scope.row)">删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts" name="MyOrder">
import {onMounted, ref} from "vue";
import useUserStore from "@/store/modules/user";
import {reqDelateOrder, reqMyOrderList, reqUpdateOrder} from "@/api/order";
import {ElMessage} from "element-plus";
let UserStore = useUserStore();
const OrderList =ref([]);

const init = (async ()=>{
  var res = await reqMyOrderList({userId:UserStore.id});
  OrderList.value = res.data;
})
const getDialog = ( async (item : any) => {
  var res = await reqUpdateOrder({id:item.id,orderStatus:3});
  if (res.code === 0) {
    ElMessage.success("已收货");
  } else {
    //提示信息添加失败
    ElMessage.error(res.message);
  }
  init();
})
const removeDialog = ( async (item: any) => {
  if(item.orderStatus != 3){
    ElMessage.error("此订单不能删除");
    return
  }
  var res = await reqDelateOrder({id:item.id});
  if (res.code === 0) {
    ElMessage.success("已删除");
  } else {
    //提示信息添加失败
    ElMessage.error(res.message);
  }
  init();
})
onMounted(() => {
  init();
})
</script>


<style scoped lang="scss">
.btn-background-color-blue {
  background-color: #1f44cc;
  color: white;
  height: 22px;
  float: left;
}
.btn-background-color-green {
  background-color: #c0e6f3;
  color: white;
  height: 22px;
  float: left;
}
.btn-background-color-red {
  background-color: #f80317;
  color: white;
  height: 22px;
  float: left;
}
</style>